<template>
  <div class="lawyer-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">
            <i class="fas fa-user-tie mr-3"></i>律师管理
          </h1>
          <p class="page-description">管理律师信息、查看工作量统计和案件分配情况</p>
        </div>
        <div class="header-actions">
          <el-button @click="refreshData">
            <i class="fas fa-sync mr-2"></i>刷新数据
          </el-button>
          <el-button @click="exportLawyers">
            <i class="fas fa-file-export mr-2"></i>导出律师数据
          </el-button>
          <el-button type="primary" @click="showWorkloadAnalysis">
            <i class="fas fa-chart-line mr-2"></i>工作量分析
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon bg-blue-100">
          <i class="fas fa-user-tie text-blue-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalLawyers }}</div>
          <div class="stat-label">律师总数</div>
          <div class="stat-change positive">
            <i class="fas fa-arrow-up"></i>
            在线 {{ statistics.onlineLawyers }}
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-green-100">
          <i class="fas fa-briefcase text-green-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.totalCases }}</div>
          <div class="stat-label">总案件数</div>
          <div class="stat-change positive">
            <i class="fas fa-arrow-up"></i>
            本月 +{{ statistics.newCases }}
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-orange-100">
          <i class="fas fa-clock text-orange-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.avgCasesPerLawyer }}</div>
          <div class="stat-label">平均案件数</div>
          <div class="stat-change neutral">
            <i class="fas fa-minus"></i>
            每位律师
          </div>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-purple-100">
          <i class="fas fa-trophy text-purple-600"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ statistics.completionRate }}%</div>
          <div class="stat-label">平均完成率</div>
          <div class="stat-change positive">
            <i class="fas fa-arrow-up"></i>
            本月提升
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选工具栏 -->
    <div class="filter-toolbar">
      <div class="filter-left">
        <el-input
          v-model="searchQuery"
          placeholder="搜索律师姓名、编号、专业领域..."
          prefix-icon="el-icon-search"
          class="search-input"
          @input="handleSearch"
        />
        
        <el-select v-model="filters.status" placeholder="选择状态" class="filter-select">
          <el-option label="全部状态" value="" />
          <el-option label="在线" value="online" />
          <el-option label="忙碌" value="busy" />
          <el-option label="离线" value="offline" />
        </el-select>

        <el-select v-model="filters.department" placeholder="选择部门" class="filter-select">
          <el-option label="全部部门" value="" />
          <el-option label="民事部" value="civil" />
          <el-option label="刑事部" value="criminal" />
          <el-option label="商事部" value="commercial" />
          <el-option label="婚姻家事部" value="family" />
        </el-select>

        <el-select v-model="filters.level" placeholder="律师级别" class="filter-select">
          <el-option label="全部级别" value="" />
          <el-option label="初级律师" value="junior" />
          <el-option label="中级律师" value="mid" />
          <el-option label="高级律师" value="senior" />
          <el-option label="合伙人" value="partner" />
        </el-select>
      </div>

      <div class="filter-right">
        <el-button @click="resetFilters">
          <i class="fas fa-undo mr-1"></i>重置
        </el-button>
        <el-button type="primary" @click="applyFilters">
          <i class="fas fa-filter mr-1"></i>应用筛选
        </el-button>
      </div>
    </div>

    <!-- 律师列表 -->
    <div class="lawyer-list-container">
      <el-table
        :data="filteredLawyers"
        stripe
        class="lawyer-table"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" />
        
        <el-table-column prop="avatar" label="头像" width="80">
          <template #default="{ row }">
            <el-avatar :src="row.avatar" :alt="row.name" size="small">
              {{ row.name.charAt(0) }}
            </el-avatar>
          </template>
        </el-table-column>

        <el-table-column prop="employeeId" label="工号" width="120" />

        <el-table-column prop="name" label="姓名" width="120">
          <template #default="{ row }">
            <el-button type="text" @click="viewLawyerDetail(row)" class="lawyer-name-link">
              {{ row.name }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="department" label="部门" width="120">
          <template #default="{ row }">
            <span class="department-badge" :class="getDepartmentClass(row.department)">
              {{ getDepartmentText(row.department) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="level" label="级别" width="100">
          <template #default="{ row }">
            <el-tag :type="getLevelType(row.level)" size="small">
              {{ getLevelText(row.level) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="status" label="在线状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small">
              <i :class="getStatusIcon(row.status)" class="mr-1"></i>
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="specialties" label="专业领域" width="180">
          <template #default="{ row }">
            <div class="specialties-tags">
              <el-tag 
                v-for="specialty in row.specialties.slice(0, 2)" 
                :key="specialty" 
                size="small" 
                class="mr-1 mb-1"
              >
                {{ specialty }}
              </el-tag>
              <span v-if="row.specialties.length > 2" class="more-count">
                +{{ row.specialties.length - 2 }}
              </span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="currentCases" label="当前案件" width="100" sortable>
          <template #default="{ row }">
            <el-button type="text" @click="viewLawyerCases(row)" class="cases-count">
              {{ row.currentCases }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="completedCases" label="已完成" width="100" sortable>
          <template #default="{ row }">
            <span class="completed-count">{{ row.completedCases }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="successRate" label="成功率" width="100" sortable>
          <template #default="{ row }">
            <div class="success-rate">
              <el-progress 
                :percentage="row.successRate" 
                :color="getSuccessRateColor(row.successRate)"
                :stroke-width="8"
                text-inside
                :show-text="false"
              />
              <span class="rate-text">{{ row.successRate }}%</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="workload" label="工作量" width="120">
          <template #default="{ row }">
            <div class="workload-indicator">
              <el-progress 
                :percentage="row.workload" 
                :color="getWorkloadColor(row.workload)"
                :stroke-width="6"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="lastLogin" label="最后登录" width="120" sortable>
          <template #default="{ row }">
            {{ formatDate(row.lastLogin) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button type="text" size="small" @click="viewLawyerDetail(row)">
                <i class="fas fa-eye mr-1"></i>详情
              </el-button>
              <el-button type="text" size="small" @click="viewLawyerCases(row)">
                <i class="fas fa-briefcase mr-1"></i>案件
              </el-button>
              <el-dropdown @command="handleMoreAction" trigger="click">
                <el-button type="text" size="small">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{action: 'assign', lawyer: row}">
                      <i class="fas fa-plus mr-2"></i>分配案件
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'performance', lawyer: row}">
                      <i class="fas fa-chart-bar mr-2"></i>绩效统计
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'schedule', lawyer: row}">
                      <i class="fas fa-calendar mr-2"></i>日程安排
                    </el-dropdown-item>
                    <el-dropdown-item :command="{action: 'contact', lawyer: row}">
                      <i class="fas fa-phone mr-2"></i>联系信息
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 律师详情对话框 -->
    <el-dialog 
      v-model="detailDialogVisible" 
      :title="`律师详情 - ${selectedLawyer?.name}`"
      width="80%" 
      class="lawyer-detail-dialog"
    >
      <div class="lawyer-detail-content" v-if="selectedLawyer">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-id-card mr-2"></i>基本信息
          </h3>
          <div class="lawyer-profile">
            <div class="profile-avatar">
              <el-avatar :src="selectedLawyer.avatar" :alt="selectedLawyer.name" :size="80">
                {{ selectedLawyer.name.charAt(0) }}
              </el-avatar>
            </div>
            <div class="profile-info">
              <div class="info-grid">
                <div class="info-item">
                  <span class="label">工号:</span>
                  <span class="value">{{ selectedLawyer.employeeId }}</span>
                </div>
                <div class="info-item">
                  <span class="label">姓名:</span>
                  <span class="value">{{ selectedLawyer.name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">部门:</span>
                  <span class="department-badge" :class="getDepartmentClass(selectedLawyer.department)">
                    {{ getDepartmentText(selectedLawyer.department) }}
                  </span>
                </div>
                <div class="info-item">
                  <span class="label">级别:</span>
                  <el-tag :type="getLevelType(selectedLawyer.level)" size="small">
                    {{ getLevelText(selectedLawyer.level) }}
                  </el-tag>
                </div>
                <div class="info-item">
                  <span class="label">执业年限:</span>
                  <span class="value">{{ selectedLawyer.experience }}年</span>
                </div>
                <div class="info-item">
                  <span class="label">联系电话:</span>
                  <span class="value">{{ selectedLawyer.phone }}</span>
                </div>
                <div class="info-item">
                  <span class="label">邮箱:</span>
                  <span class="value">{{ selectedLawyer.email }}</span>
                </div>
                <div class="info-item">
                  <span class="label">入职时间:</span>
                  <span class="value">{{ formatDate(selectedLawyer.joinDate) }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 专业领域 -->
          <div class="specialties-section">
            <h4 class="subsection-title">专业领域</h4>
            <div class="specialties-list">
              <el-tag 
                v-for="specialty in selectedLawyer.specialties" 
                :key="specialty" 
                class="specialty-tag"
              >
                {{ specialty }}
              </el-tag>
            </div>
          </div>

          <!-- 个人简介 -->
          <div class="bio-section" v-if="selectedLawyer.bio">
            <h4 class="subsection-title">个人简介</h4>
            <p class="bio-text">{{ selectedLawyer.bio }}</p>
          </div>
        </div>

        <!-- 工作统计 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-chart-bar mr-2"></i>工作统计
          </h3>
          <div class="stats-overview">
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-briefcase text-blue-600"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ selectedLawyer.currentCases }}</div>
                <div class="stat-label">当前案件</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-check-circle text-green-600"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ selectedLawyer.completedCases }}</div>
                <div class="stat-label">已完成案件</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-trophy text-yellow-600"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ selectedLawyer.successRate }}%</div>
                <div class="stat-label">成功率</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="fas fa-star text-purple-600"></i>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ selectedLawyer.rating || 4.8 }}</div>
                <div class="stat-label">客户评分</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 最近案件 -->
        <div class="detail-section">
          <h3 class="section-title">
            <i class="fas fa-folder mr-2"></i>最近案件
          </h3>
          <div class="recent-cases" v-if="selectedLawyer.recentCases">
            <div 
              v-for="case_ in selectedLawyer.recentCases" 
              :key="case_.id" 
              class="case-item"
            >
              <div class="case-header">
                <span class="case-number">{{ case_.caseNumber }}</span>
                <el-tag :type="getCaseStatusType(case_.status)" size="small">
                  {{ getCaseStatusText(case_.status) }}
                </el-tag>
              </div>
              <div class="case-info">
                <span class="case-client">{{ case_.clientName }}</span>
                <span class="case-type">{{ getCaseTypeText(case_.type) }}</span>
                <span class="case-date">{{ formatDate(case_.createDate) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="viewLawyerCases(selectedLawyer)">查看所有案件</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 律师案件对话框 -->
    <el-dialog 
      v-model="casesDialogVisible" 
      :title="`${selectedLawyer?.name} 的案件列表`"
      width="90%" 
      class="lawyer-cases-dialog"
    >
      <div class="cases-content" v-if="selectedLawyer">
        <!-- 案件统计 -->
        <div class="cases-stats">
          <div class="stat-card">
            <div class="stat-number">{{ lawyerCases.filter(c => c.status === 'active').length }}</div>
            <div class="stat-label">进行中</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ lawyerCases.filter(c => c.status === 'pending').length }}</div>
            <div class="stat-label">待处理</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ lawyerCases.filter(c => c.status === 'completed').length }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">{{ lawyerCases.filter(c => c.status === 'overdue').length }}</div>
            <div class="stat-label">逾期</div>
          </div>
        </div>

        <!-- 案件列表 -->
        <el-table :data="lawyerCases" stripe class="cases-table">
          <el-table-column prop="caseNumber" label="案件编号" width="140" />
          <el-table-column prop="clientName" label="客户姓名" width="120" />
          <el-table-column prop="type" label="案件类型" width="120">
            <template #default="{ row }">
              <el-tag :type="getCaseTypeColor(row.type)" size="small">
                {{ getCaseTypeText(row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <el-tag :type="getCaseStatusType(row.status)" size="small">
                {{ getCaseStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="progress" label="进度" width="120">
            <template #default="{ row }">
              <el-progress 
                :percentage="row.progress" 
                :color="getProgressColor(row.progress)"
                :stroke-width="8"
                text-inside
              />
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间" width="120">
            <template #default="{ row }">
              {{ formatDate(row.createDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="deadline" label="截止时间" width="120">
            <template #default="{ row }">
              <span :class="{ 'text-red-500': isOverdue(row.deadline) }">
                {{ formatDate(row.deadline) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button type="text" size="small" @click="viewCaseDetail(row)">
                详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="casesDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="assignNewCase">分配新案件</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 工作量分析对话框 -->
    <el-dialog v-model="analysisDialogVisible" title="律师工作量分析" width="90%">
      <div class="analysis-content">
        <!-- 这里可以添加图表组件 -->
        <div class="charts-grid">
          <div class="chart-item">
            <h4>律师案件分布</h4>
            <div class="chart-placeholder">
              <div class="chart-mock">律师案件分布图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>部门工作量对比</h4>
            <div class="chart-placeholder">
              <div class="chart-mock">部门工作量对比图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>成功率趋势</h4>
            <div class="chart-placeholder">
              <div class="chart-mock">成功率趋势图</div>
            </div>
          </div>
          <div class="chart-item">
            <h4>律师排行榜</h4>
            <div class="chart-placeholder">
              <div class="chart-mock">律师绩效排行榜</div>
            </div>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="analysisDialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="exportAnalysis">导出分析报告</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'AdminLawyerManagement',
  setup() {
    // 响应式数据
    const loading = ref(false)
    const searchQuery = ref('')
    const detailDialogVisible = ref(false)
    const casesDialogVisible = ref(false)
    const analysisDialogVisible = ref(false)
    const selectedLawyer = ref(null)
    const selectedLawyers = ref([])
    const lawyerCases = ref([])

    // 筛选条件
    const filters = reactive({
      status: '',
      department: '',
      level: ''
    })

    // 分页信息
    const pagination = reactive({
      currentPage: 1,
      pageSize: 20,
      total: 0
    })

    // 统计数据
    const statistics = reactive({
      totalLawyers: 0,
      onlineLawyers: 0,
      totalCases: 0,
      newCases: 0,
      avgCasesPerLawyer: 0,
      completionRate: 0
    })

    // 律师数据
    const lawyers = ref([])

    // 计算属性 - 过滤后的律师列表
    const filteredLawyers = computed(() => {
      let result = lawyers.value

      // 搜索筛选
      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        result = result.filter(lawyer => 
          lawyer.name.toLowerCase().includes(query) ||
          lawyer.employeeId.toLowerCase().includes(query) ||
          lawyer.specialties.some(s => s.toLowerCase().includes(query))
        )
      }

      // 状态筛选
      if (filters.status) {
        result = result.filter(lawyer => lawyer.status === filters.status)
      }

      // 部门筛选
      if (filters.department) {
        result = result.filter(lawyer => lawyer.department === filters.department)
      }

      // 级别筛选
      if (filters.level) {
        result = result.filter(lawyer => lawyer.level === filters.level)
      }

      return result
    })

    // 初始化模拟数据
    const initData = () => {
      // 模拟律师数据
      lawyers.value = [
        {
          id: 1,
          employeeId: 'LAW001',
          name: '张晓明',
          avatar: '/avatars/lawyer1.jpg',
          department: 'civil',
          level: 'senior',
          status: 'online',
          specialties: ['交通事故', '人身损害', '合同纠纷'],
          currentCases: 15,
          completedCases: 89,
          successRate: 92,
          workload: 75,
          experience: 8,
          phone: '13800138001',
          email: 'zhang.xiaoming@law.com',
          joinDate: '2016-03-15',
          lastLogin: '2024-01-20 14:30',
          rating: 4.9,
          bio: '专业从事民事诉讼8年，擅长处理交通事故和人身损害赔偿案件，成功代理各类民事案件200余起。',
          recentCases: [
            { id: 1, caseNumber: 'CASE202401001', clientName: '李四', type: 'traffic', status: 'active', createDate: '2024-01-15' },
            { id: 2, caseNumber: 'CASE202401002', clientName: '王五', type: 'personal', status: 'pending', createDate: '2024-01-18' },
            { id: 3, caseNumber: 'CASE202401003', clientName: '赵六', type: 'contract', status: 'completed', createDate: '2024-01-10' }
          ]
        },
        {
          id: 2,
          employeeId: 'LAW002',
          name: '李雅婷',
          avatar: '/avatars/lawyer2.jpg',
          department: 'family',
          level: 'mid',
          status: 'busy',
          specialties: ['婚姻家庭', '财产分割', '子女抚养'],
          currentCases: 12,
          completedCases: 56,
          successRate: 88,
          workload: 60,
          experience: 5,
          phone: '13800138002',
          email: 'li.yating@law.com',
          joinDate: '2019-07-01',
          lastLogin: '2024-01-20 16:45',
          rating: 4.7,
          bio: '专注婚姻家事法律服务5年，具有丰富的调解和诉讼经验，为当事人争取最大合法权益。',
          recentCases: [
            { id: 4, caseNumber: 'CASE202401004', clientName: '陈七', type: 'family', status: 'active', createDate: '2024-01-12' },
            { id: 5, caseNumber: 'CASE202401005', clientName: '孙八', type: 'family', status: 'active', createDate: '2024-01-16' }
          ]
        },
        {
          id: 3,
          employeeId: 'LAW003',
          name: '王志强',
          avatar: '/avatars/lawyer3.jpg',
          department: 'commercial',
          level: 'partner',
          status: 'online',
          specialties: ['公司法务', '合同审查', '投资并购'],
          currentCases: 8,
          completedCases: 156,
          successRate: 95,
          workload: 45,
          experience: 12,
          phone: '13800138003',
          email: 'wang.zhiqiang@law.com',
          joinDate: '2012-09-01',
          lastLogin: '2024-01-20 17:20',
          rating: 4.8,
          bio: '资深商事律师，具有12年执业经验，专业从事公司法务和投资并购业务，服务过多家知名企业。',
          recentCases: [
            { id: 6, caseNumber: 'CASE202401006', clientName: '某公司', type: 'commercial', status: 'active', createDate: '2024-01-08' }
          ]
        },
        {
          id: 4,
          employeeId: 'LAW004',
          name: '刘美华',
          avatar: '/avatars/lawyer4.jpg',
          department: 'criminal',
          level: 'junior',
          status: 'offline',
          specialties: ['刑事辩护', '取保候审'],
          currentCases: 6,
          completedCases: 23,
          successRate: 78,
          workload: 30,
          experience: 2,
          phone: '13800138004',
          email: 'liu.meihua@law.com',
          joinDate: '2022-03-15',
          lastLogin: '2024-01-19 18:00',
          rating: 4.3,
          bio: '新进律师，专注刑事辩护领域，虽然经验较少但学习能力强，积极进取。',
          recentCases: [
            { id: 7, caseNumber: 'CASE202401007', clientName: '钱九', type: 'criminal', status: 'pending', createDate: '2024-01-14' }
          ]
        }
      ]

      // 更新统计数据
      updateStatistics()

      // 模拟案件数据（为律师案件对话框准备）
      lawyerCases.value = [
        { id: 1, caseNumber: 'CASE202401001', clientName: '李四', type: 'traffic', status: 'active', progress: 65, createDate: '2024-01-15', deadline: '2024-03-15' },
        { id: 2, caseNumber: 'CASE202401002', clientName: '王五', type: 'personal', status: 'pending', progress: 25, createDate: '2024-01-18', deadline: '2024-04-18' },
        { id: 3, caseNumber: 'CASE202401003', clientName: '赵六', type: 'contract', status: 'completed', progress: 100, createDate: '2024-01-10', deadline: '2024-02-28' },
        { id: 4, caseNumber: 'CASE202401008', clientName: '周十', type: 'traffic', status: 'overdue', progress: 45, createDate: '2023-12-15', deadline: '2024-01-15' }
      ]
    }

    // 更新统计数据
    const updateStatistics = () => {
      const total = lawyers.value.length
      const online = lawyers.value.filter(l => l.status === 'online').length
      const totalCases = lawyers.value.reduce((sum, l) => sum + l.currentCases, 0)
      const avgCases = total > 0 ? Math.round(totalCases / total) : 0
      const avgSuccess = total > 0 ? Math.round(lawyers.value.reduce((sum, l) => sum + l.successRate, 0) / total) : 0
      
      statistics.totalLawyers = total
      statistics.onlineLawyers = online
      statistics.totalCases = totalCases
      statistics.newCases = 23 // 模拟数据
      statistics.avgCasesPerLawyer = avgCases
      statistics.completionRate = avgSuccess
      
      pagination.total = total
    }

    // 工具方法
    const getDepartmentClass = (department) => {
      const classMap = {
        civil: 'dept-civil',
        criminal: 'dept-criminal',
        commercial: 'dept-commercial',
        family: 'dept-family'
      }
      return classMap[department] || 'dept-default'
    }

    const getDepartmentText = (department) => {
      const textMap = {
        civil: '民事部',
        criminal: '刑事部',
        commercial: '商事部',
        family: '婚姻家事部'
      }
      return textMap[department] || '未分配'
    }

    const getLevelType = (level) => {
      const typeMap = {
        junior: 'info',
        mid: 'primary',
        senior: 'warning',
        partner: 'danger'
      }
      return typeMap[level] || 'info'
    }

    const getLevelText = (level) => {
      const textMap = {
        junior: '初级律师',
        mid: '中级律师',
        senior: '高级律师',
        partner: '合伙人'
      }
      return textMap[level] || '未知'
    }

    const getStatusType = (status) => {
      const typeMap = {
        online: 'success',
        busy: 'warning',
        offline: 'info'
      }
      return typeMap[status] || 'info'
    }

    const getStatusIcon = (status) => {
      const iconMap = {
        online: 'fas fa-circle',
        busy: 'fas fa-clock',
        offline: 'far fa-circle'
      }
      return iconMap[status] || 'far fa-circle'
    }

    const getStatusText = (status) => {
      const textMap = {
        online: '在线',
        busy: '忙碌',
        offline: '离线'
      }
      return textMap[status] || '未知'
    }

    const getSuccessRateColor = (rate) => {
      if (rate >= 90) return '#38a169'
      if (rate >= 80) return '#ed8936'
      return '#f56565'
    }

    const getWorkloadColor = (workload) => {
      if (workload >= 80) return '#f56565'
      if (workload >= 60) return '#ed8936'
      return '#38a169'
    }

    const getCaseTypeColor = (type) => {
      const colorMap = {
        traffic: 'primary',
        personal: 'success',
        contract: 'warning',
        family: 'danger',
        commercial: 'info',
        criminal: 'danger'
      }
      return colorMap[type] || 'info'
    }

    const getCaseTypeText = (type) => {
      const textMap = {
        traffic: '交通事故',
        personal: '人身损害',
        contract: '合同纠纷',
        family: '婚姻家庭',
        commercial: '商事纠纷',
        criminal: '刑事案件'
      }
      return textMap[type] || '其他'
    }

    const getCaseStatusType = (status) => {
      const typeMap = {
        active: 'primary',
        pending: 'warning',
        completed: 'success',
        overdue: 'danger'
      }
      return typeMap[status] || 'info'
    }

    const getCaseStatusText = (status) => {
      const textMap = {
        active: '进行中',
        pending: '待处理',
        completed: '已完成',
        overdue: '逾期'
      }
      return textMap[status] || '未知'
    }

    const getProgressColor = (progress) => {
      if (progress < 30) return '#f56565'
      if (progress < 70) return '#ed8936'
      return '#38a169'
    }

    const formatDate = (date) => {
      return dayjs(date).format('YYYY-MM-DD')
    }

    const isOverdue = (deadline) => {
      return dayjs().isAfter(dayjs(deadline))
    }

    // 事件处理方法
    const handleSearch = () => {
      pagination.currentPage = 1
    }

    const resetFilters = () => {
      searchQuery.value = ''
      filters.status = ''
      filters.department = ''
      filters.level = ''
      pagination.currentPage = 1
    }

    const applyFilters = () => {
      pagination.currentPage = 1
      ElMessage.success('筛选条件已应用')
    }

    const handleSelectionChange = (selection) => {
      selectedLawyers.value = selection
    }

    const handleSortChange = ({ prop, order }) => {
      ElMessage.info(`按 ${prop} ${order === 'ascending' ? '升序' : '降序'} 排序`)
    }

    const handleSizeChange = (size) => {
      pagination.pageSize = size
      pagination.currentPage = 1
    }

    const handleCurrentChange = (page) => {
      pagination.currentPage = page
    }

    const refreshData = () => {
      loading.value = true
      setTimeout(() => {
        initData()
        loading.value = false
        ElMessage.success('数据已刷新')
      }, 1000)
    }

    const exportLawyers = () => {
      ElMessage.success('律师数据导出功能开发中...')
    }

    const showWorkloadAnalysis = () => {
      analysisDialogVisible.value = true
    }

    const exportAnalysis = () => {
      ElMessage.success('分析报告导出功能开发中...')
    }

    const viewLawyerDetail = (lawyer) => {
      selectedLawyer.value = lawyer
      detailDialogVisible.value = true
    }

    const viewLawyerCases = (lawyer) => {
      selectedLawyer.value = lawyer
      // 这里应该根据律师ID获取真实的案件数据
      casesDialogVisible.value = true
    }

    const viewCaseDetail = (case_) => {
      ElMessage.info(`查看案件详情: ${case_.caseNumber}`)
    }

    const assignNewCase = () => {
      ElMessage.info('分配新案件功能开发中...')
    }

    const handleMoreAction = ({ action, lawyer }) => {
      switch (action) {
        case 'assign':
          ElMessage.info(`为 ${lawyer.name} 分配案件`)
          break
        case 'performance':
          ElMessage.info(`查看 ${lawyer.name} 的绩效统计`)
          break
        case 'schedule':
          ElMessage.info(`查看 ${lawyer.name} 的日程安排`)
          break
        case 'contact':
          ElMessage.info(`联系 ${lawyer.name}`)
          break
      }
    }

    // 生命周期
    onMounted(() => {
      initData()
    })

    return {
      loading,
      searchQuery,
      detailDialogVisible,
      casesDialogVisible,
      analysisDialogVisible,
      selectedLawyer,
      selectedLawyers,
      lawyerCases,
      filters,
      pagination,
      statistics,
      lawyers,
      filteredLawyers,
      getDepartmentClass,
      getDepartmentText,
      getLevelType,
      getLevelText,
      getStatusType,
      getStatusIcon,
      getStatusText,
      getSuccessRateColor,
      getWorkloadColor,
      getCaseTypeColor,
      getCaseTypeText,
      getCaseStatusType,
      getCaseStatusText,
      getProgressColor,
      formatDate,
      isOverdue,
      handleSearch,
      resetFilters,
      applyFilters,
      handleSelectionChange,
      handleSortChange,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      exportLawyers,
      showWorkloadAnalysis,
      exportAnalysis,
      viewLawyerDetail,
      viewLawyerCases,
      viewCaseDetail,
      assignNewCase,
      handleMoreAction
    }
  }
}
</script>

<style scoped>
.lawyer-management {
  padding: 24px;
  background-color: #f8fafc;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #1a202c;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
}

.page-description {
  color: #718096;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 统计卡片 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #1a202c;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  color: #718096;
  font-size: 14px;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.positive {
  color: #38a169;
}

.stat-change.negative {
  color: #e53e3e;
}

.stat-change.neutral {
  color: #718096;
}

/* 筛选工具栏 */
.filter-toolbar {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-left {
  display: flex;
  gap: 12px;
  flex: 1;
  align-items: center;
}

.search-input {
  width: 280px;
}

.filter-select {
  width: 150px;
}

.filter-right {
  display: flex;
  gap: 8px;
}

/* 律师列表 */
.lawyer-list-container {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.lawyer-table {
  width: 100%;
}

.lawyer-name-link {
  color: #3182ce;
  text-decoration: none;
  font-weight: 500;
}

.lawyer-name-link:hover {
  color: #2c5aa0;
  text-decoration: underline;
}

.department-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.dept-civil {
  background: #bee3f8;
  color: #2c5aa0;
}

.dept-criminal {
  background: #fed7d7;
  color: #c53030;
}

.dept-commercial {
  background: #c6f6d5;
  color: #276749;
}

.dept-family {
  background: #fbb6ce;
  color: #97266d;
}

.dept-default {
  background: #e2e8f0;
  color: #4a5568;
}

.specialties-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.more-count {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
}

.cases-count {
  color: #3182ce;
  font-weight: 600;
}

.completed-count {
  color: #38a169;
  font-weight: 600;
}

.success-rate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rate-text {
  font-size: 12px;
  font-weight: 500;
  color: #4a5568;
  min-width: 35px;
}

.workload-indicator {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e2e8f0;
}

/* 律师详情对话框 */
.lawyer-detail-dialog {
  border-radius: 12px;
}

.lawyer-detail-content {
  max-height: 70vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 2px solid #e2e8f0;
}

.lawyer-profile {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.profile-avatar {
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item .label {
  font-size: 12px;
  color: #718096;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.info-item .value {
  font-size: 14px;
  color: #1a202c;
  font-weight: 500;
}

.subsection-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin: 20px 0 12px 0;
}

.specialties-section,
.bio-section {
  margin-top: 20px;
}

.specialties-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.specialty-tag {
  margin: 0;
}

.bio-text {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f7fafc;
  border-radius: 8px;
}

.stat-item .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.stat-item .stat-info {
  flex: 1;
}

.stat-item .stat-number {
  font-size: 20px;
  font-weight: bold;
  color: #1a202c;
  line-height: 1;
  margin-bottom: 2px;
}

.stat-item .stat-label {
  font-size: 12px;
  color: #718096;
  margin: 0;
}

.recent-cases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-item {
  background: #f7fafc;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #3182ce;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.case-number {
  font-weight: 600;
  color: #1a202c;
}

.case-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #4a5568;
}

/* 律师案件对话框 */
.lawyer-cases-dialog {
  border-radius: 12px;
}

.cases-content {
  max-height: 70vh;
  overflow-y: auto;
}

.cases-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.cases-stats .stat-card {
  padding: 16px;
  text-align: center;
  background: #f7fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.cases-stats .stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1a202c;
  margin-bottom: 4px;
}

.cases-stats .stat-label {
  font-size: 12px;
  color: #718096;
  margin: 0;
}

.cases-table {
  width: 100%;
}

/* 工作量分析 */
.analysis-content {
  padding: 20px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.chart-item {
  background: #f7fafc;
  border-radius: 8px;
  padding: 20px;
}

.chart-item h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 16px 0;
  text-align: center;
}

.chart-placeholder {
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 6px;
  border: 2px dashed #cbd5e0;
}

.chart-mock {
  color: #718096;
  font-size: 14px;
}

/* 对话框底部 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 0 0;
  border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .lawyer-management {
    padding: 16px;
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .filter-left {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-input,
  .filter-select {
    width: 100%;
  }
  
  .lawyer-profile {
    flex-direction: column;
    text-align: center;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  .case-info {
    flex-direction: column;
    gap: 8px;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 16px;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .filter-toolbar {
    padding: 16px;
  }
  
  .lawyer-detail-content {
    max-height: 60vh;
  }
  
  .detail-section {
    margin-bottom: 24px;
  }
  
  .cases-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

